<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
<link rel="icon" href="./images/favicon.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">

<title>索尔云员工信息系统</title>

<style type="text/css">

html{
	height:100%;
}
body{
	height:100%;
	
	display:flex;
	flex-direction: colum;/* 定义纵向为主轴 */
	justify-content: center;/* 主轴居中 */
	align-items: center;/* 交叉轴居中 */
}

.my-login{
	width:400px;
	

}

.fade-enter-active, .fade-leave-active {
  transition: width .5s;
}
.fade-enter, .fade-leave-to{
  width: 0;
  
}


</style>

</head>
<!-- height:100% !important; 表示如果其它样式设置改变了高度，仍以本设置生效 -->
<body style="height:100% !important;">


<div id="app" class="my-login card shadow pb-4 mb-5">
  <div class="card-header bg-white text-primary font-weight-bolder ">
    索尔员工信息系统-登录
  </div>
  <div class="card-body mt-3">
   	<form ref="loginForm" novalidate >
	  <div class="form-group">
	    <label>账户</label>
	    <input v-model="loginData.u_id" type="text" class="form-control" placeholder="请输入账号" required >
	    <div class="invalid-feedback">
	    	请输入账户！
	    </div>
	  </div>
	  <div class="form-group">
	    <label>密码</label>
	    <!-- ^.{6,20}$ 正则表达式 -->
	    <input v-model="loginData.u_pwd" type="password" class="form-control" placeholder="请输入密码" pattern="^.{6,20}$" required >
	    <div class="invalid-feedback">
	    	密码必须是6到20个字符！
	    </div>
	  </div>
	  
	  <button @click="login" type="button" class="btn btn-primary btn-lg btn-block mt-5">登录</button>
	</form>
  </div>
</div>


<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/sweetalert2.all.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/request.js"></script>

<script type="text/javascript">

	new Vue({
		el:'#app',
		data:{
			loginData:{//登录数据
				u_id:'',
				u_pwd:''
			},
		},
		methods:{
			
			
			
			login(){
				
				//验证数据格式
				const form = this.$refs.loginForm;
				form.classList.add('was-validated');//显示验证结果及样式
				if(form.checkValidity() === false){//验证没有通过					
					return;
				}
				
				//postMsg:true 表示提示信息出现后，再执行其它逻辑
				http_post('login',this.loginData,{postMsg:true}).then((result)=>{
					//result即服务器发送来的结果信息，其中有一个data属性存放的是用户信息
					//登录成功，当前用户信息应当在浏览器端和服务端分别存储
					//sessionStorage在浏览器窗口没有关闭前有校
					//sessionStorage只能存储字符串，不能存对象
					const currUserStr = JSON.stringify(result.data);//将对象转化为（json）字符串
					console.log(currUserStr);
					window.sessionStorage.setItem('CurrUser',currUserStr);
					
					//跳转到home.html
					//console.log(window.loacation);//打印日志
					window.location.href='home.html';
				});
			}
		},
		mounted(){//绑定的#app渲染完成后执行的逻辑
			
			
		}
	});

</script>



</body>
</html>